<template>
	<view class="container">
		<view class="input" type="text" >
			<p>
				<u-icon name="search"></u-icon>
				<font>请输入内容</font>
			</p>	
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item  v-for="(item,index) in list1" :key="item.id">
					<image :src="item.src" alt="">
				</swiper-item>
			</swiper>
		</view>
		<!-- 宫格 -->
		<view class="grid" >
			<view class="gird-item" v-for="(item,index) in list2" :key="item.id" @click="tz(index)">
				<image :src="item.src" mode=""></image>
				<p>{{item.name}}</p>
			</view>
		</view>
		<!-- 领券 -->
		<scroll-view scroll-x="true" >
			<view class="box">
				<view class="box_item" >
					<view class="box-list" v-for="(item,index) in list3" :key="item.id">
						<view class="left">
							<span >￥{{item.price}}</span>
							<p>适用课程:{{item.value.title}}</p>
						</view>
						<view class="right">
							领取
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 拼团 -->
		<view class="name">
			<span>拼团</span>
		</view>
		<view class="pin">
			<scroll-view scroll-x="true" >
				<view class="pin_bg" >
					<view class="pin_title" v-for="(item,index) in pin" :key="item.id">
						<image :src="item.cover" mode=""></image><br/>
						<span class="ss">{{item.title}}</span><br/>
						<span class="p">￥{{item.price}}<font color="#ccc" size="3px">￥{{item.t_price}}</font></span>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 最新列表 -->
		<view class="lie">
			<p>
				<span>最新列表</span>
				<span class="duo" @click="more">查看更多</span>
			</p>
			<view class="lie_list" v-for="(item,index) in lie" :key="item.id">
				<view class="left_list">
					<img :src="item.cover" mode=""></img>
				</view>
				<view class="right_list">
					<h4>{{item.title}}</h4>
					<span>￥{{item.price}}<font  color="#ccc" size="3px">￥{{item.t_price}}</font></span>
				</view>
			</view>
		</view>
		<!-- 底图 -->
		<div class="bottom">
			<image :src="tu.data" mode=""></image>
		</div>
	</view>
	
</template>

<script>
	import {getHome,getQuan,getPin} from "@/api/home.js"
	export default {
		data() {
			return {
				list1:[],//轮播tu
				list2:[],//宫格
				list3:[],//领券
				pin:[],//拼单
				lie:[],
				tu:[]
			}
		},
		onLoad() {
			this.getHomeList(),
			this.getQuanList(),
			this.getPinList()
		},
		methods: {
			//跳到考试列表
			tz(index){
				console.log(index);
				if(index==1){
					uni.navigateTo({
						url:'/pages/test-list/test-list'
					})
				}
				if(index==6){
					uni.navigateTo({
						url:'/pages/book-list/book-list'
					})
				}
			},
			//点击跳转
			more(){
				uni.navigateTo({
					url:'/pages/list/list'
				})
			},
			//获取所有数据
			 getHomeList(){
				getHome().then(res=>{
					console.log(res)
					this.list1=res.data[1].data;
					this.list2=res.data[2].data;
					this.lie=res.data[5].data;
					this.tu=res.data[6]
				})
			},
			// 领券的数据
			getQuanList(){
				getQuan().then(res=>{
					this.list3=res.data
					// console.log(  9999,this.list3)
				})
			},
			// 拼团的数据
			getPinList(){
				getPin().then(res=>{
					this.pin=res.data.rows;
					// console.log(this.pin,222);
				})
			}
		},
		
	}
</script>

<style lang="scss">
	.container{
		background-color: #f5f5f3;
	}
	.input{
		height: 80rpx;
		background-color: #fff; 
		line-height: 80rpx;
		p{
			background-color: gainsboro;
			border-radius: 4rpx;
			width: 95%;
			margin: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.swiper{
		background-color: #fff;
		width: 100%;
		
		image{
			margin: 20rpx;
			width: 95%;
			height: 100%;
		}
	}
	.grid{
		background-color: #fff;
		// width: 95%;
		width: 100%;
		height: 360rpx;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		.gird-item{
			width: 25%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
	.box{
		width: 100%;
		height: 200rpx;
		.box_item{
			width: 400%;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			.box-list{
				width:100%;
				height: 140rpx;
				display: flex;
				text-align: center;
				color: #fff;
				margin-right: 40rpx;
				.left{
					width: 90%;
					background-color: orange;
					font-size: 20rpx;
					padding-top: 15px;
					border-right: 4rpx dashed #fff;
					span{
						font-size: 18rpx;
					}
				}
				.right{
					width: 25%;
					background-color: gold;
					line-height: 140rpx;
					
				}
			}
			
		}
	}
	.name{
		padding: 15rpx 10rpx;
		font-weight: bold;
		font-size: 20rpx;
		background-color: #fff;
	}
	.pin{
		width: 100%;
		height: 150px;
		background-color: #fff;
		.pin_bg{
			width: 260%;
			display: flex;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;	
			.pin_title{
				padding-left: 20rpx;
				image{
					width: 340rpx;
					height:180rpx;
				}
				.ss{
					display: inline-block;
					font-size: 15rpx;
					width: 200rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.p{
					font-size: 40rpx;
					color: red;
				}
			}
		}
		
	}
	.lie{
		margin-top: 20rpx;
		width: 100%;
		background-color: #fff;
		p{
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			span{
				font-size:35rpx;
				font-weight: bold;
			}
			.duo{
				color: #ccc;
				font-size: 20rpx;
			}
		}
		.lie_list{
			width: 100%;
			height: 180rpx;
			display: flex;
			margin: 10px;
			justify-content: space-between;
			.left_list{
				width: 300rpx;
				height: 180rpx;
				img{
					width: 300rpx;
					height:170rpx;
				}
			}
			.right_list{
				flex:1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				h4{
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-weight: 500;
					font-size: 17px!important;
				}
				span{
					color: red;
					font-size: 40rpx;
				}
			}
		}
	}
	.bottom{
		image{
			width: 100%;
			height: 178px;
		}
	}
</style>
